<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js对标签名操作</title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background: red;
			}
			#box2{
				width: 100px;
				height: 100px;
				background: blue;
			}
			#box3{
				width: 100px;
				height: 100px;
				background: green;
			}
		</style>
	</head>
	<body>
		<div id="box1" class="box">
			我是盒子1
		</div>
		<div id="box2" class="box">
			我是盒子2
		</div>
		<div id="box3" class="box">
			我是盒子3
		</div>
		<input type="button" value="换div1颜色" onclick="change_box1_color()">
		<input type="button" value="换div_all颜色" onclick="change_box_all_color()">
		<input type="button" value="换统一class标签文件" onclick="change_class_box_all_color()">
		<script type="text/javascript">
			// 改变盒子1的颜色
			function change_box1_color(){
				// 得到的是所有div属性的数组集合
				var divEles = document.getElementsByTagName("div");
				// 取第一个盒子进行操作
				divEles[0].style.backgroundColor = '#ccc';
			}
			// 改变所有盒子的颜色
			function change_box_all_color(){
				// 得到的是所有div属性的数组集合
				var divEles = document.getElementsByTagName("div");
				// 遍历改变所有盒子的颜色
				for(var i = 0;i<divEles.length;i++){
					divEles[i].style.background = 'yellow';
				}
			}
			// 通过class 进行统一改变,返回的也是数组
			function change_class_box_all_color(){
				var divEles = document.getElementsByClassName("box");
				for(var i = 0;i<divEles.length;i++){
					divEles[i].style.background = "yellow";
				}
			}
		</script>
	</body>
</html>
